﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title>用户管理</title>
    <link href="../lib/layui/css/layui.min.css" rel="stylesheet" />
    <link href="../x-admin/css/font.css" rel="stylesheet" />
    <link href="../x-admin/css/xadmin.css" rel="stylesheet" />
    <script type="text/javascript" src="../lib/Base64/base64.min.js"></script>
    <script type="text/javascript" src="../linq.js/linq.js"></script>
    <script src="../lib/layui/layui.js"></script>
    <script src="../lib/cookie/cookie.js"></script>
</head>
<body>
    <div class="layui-card">
        <form class="layui-form layui-form-pane" style="padding-top:10px;" lay-filter="userSearchForm">
            <div class="layui-form-item" style="margin-bottom:0;">
                <div class="layui-inline">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input class="layui-input" name="name" type="text" autocomplete="off" />
                    </div>
                </div>
                <div class="layui-inline">
                    <a class="layui-btn" href="javascript:;" lay-submit lay-filter="load" id="load">搜索</a>
                </div>
            </div>
        </form>
        <table id="userTable" lay-filter="userTable"></table>
    </div>
    <script type="text/html" id="userbar">
        <a title="角色管理" href="javascript:;" lay-event="role"><i class="layui-icon">&#xe716;</i>角色管理</a>
        <a title="查看" href="javascript:;" lay-event="detail"><i class="layui-icon">&#xe63c;</i>查看</a>
    </script>

    <script>
        layui.use('table', function () {
            var table = layui.table;
            //第一个实例
            $tab = table.render({
                id: 'userTable',
                elem: '#userTable',
                skin: 'row',
                url: localStorage.getItem('hosttingaddr') + '/api/UserAuthority/index', //数据接口
                headers: {
                    user: getCookie("userinfo")
                },
                page: true,
                cols: [[ //表头
                    { field: 'id', title: 'ID', fixed: 'left', align: 'center' },
                    { field: 'name', title: '用户名', align: 'center' },
                    { field: 'xianshimingcheng', title: '姓名', align: 'center' },
                    { field: 'did', hide: true },
                    { field: 'dname', title: '部门', align: 'center' },
                    { field: 'gid', hide: true },
                    { field: 'gname', title: '组织名称', align: 'center' },
                    { field: 'rid', hide: true },
                    { field: 'rname', title: '角色名称', align: 'center' },
                    { fixed: 'right', title: '操作', align: 'center', toolbar: '#userbar' }
                ]],
                where: getWhere()
            });


            //监听行工具事件
            table.on('tool(userTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值

                if (layEvent == 'role') {
                    layer.open({
                        type: 2,
                        title: '角色管理',
                        maxmin: true,
                        shadeClose: false, //点击遮罩关闭层
                        area: ['600px', '350px'],
                        content: 'userrole.html' + '?id='+data.id+'&did='+data.did+'&rid=' + data.rid// iframe链接地址
                    });

                }
                else if (layEvent == 'detail') {
                    var iteminfo = btoa(window.encodeURIComponent(JSON.stringify(data)));
                    layer.open({
                        type: 2,
                        title: '用户详情',
                        maxmin: true,
                        shadeClose: false, //点击遮罩关闭层
                        area: ['600px', '420px'],
                        content: 'userdetail.html' + '?iteminfo=' + iteminfo // iframe链接地址
                    });
                }
                
            });
            layui.form.on("submit(load)", function () {
                var where = getWhere();
                $tab.reload({
                    where: where,
                    page: { curr: 1 }
                });
                return false;
            });

            function getWhere() {
                var where = layui.form.val("userSearchForm");
                return where;
            }
        })
    </script>
</body>
</html>